<!--批量导入课程步骤一-->
<template>
    <a-row >
        <div class="page_title">批量导入二</div>
        <div class="show_content">
          <a-steps :current="userState.current" :style="{marginLeft:'-32%'}">
            <a-step>
              <template slot="title">
                步骤一
              </template>
              <span slot="description">上传Excel表格文件</span>
            </a-step>
            <a-step title="步骤二" description="检查Excel表格识别结果确认导入" />
          </a-steps>
          <div style="display: flex;justify-content: flex-end;width: 100%;">
            <a-button type="default" class="button_one" @click="backPre">
              返回上一步
            </a-button>
            <a-button type="primary" class="button_one" @click="importUser">
              检查完毕，确认导入
            </a-button>
          </div>
          <div style="margin: 1em auto; width: 100%; position: relative;min-height: 25em;">
            <a-table v-if="userState.uploadState === 0" :data-source="userState.studentRecord" :rowKey="(record) => {return record.stuId}" >
              <a-table-column width="15%" title="姓名" data-index="name" />
              <a-table-column width="15%" title="学号" data-index="stuNumber" />
              <a-table-column width="15%" title="学校" data-index="school" />
              <a-table-column width="15%" title="邮箱" data-index="email" />
              <a-table-column width="15%" key="stuId" title="操作">
                <template slot-scope="record">
                          <span>
                                <a-popconfirm
                                    title="确认删除该用户么?"
                                    @confirm="() => deleteUser(record.index,0)"
                                >
                                    <a href="javascript:;">删除</a>
                                </a-popconfirm>
                          </span>
                </template>
              </a-table-column>
            </a-table>
            <a-table v-if="userState.uploadState === 1" :scroll="{ x: 1500, y: 300 }"
                     :data-source="userState.teacherRecord" :rowKey="(record) => {return record.index}" >
              <a-table-column width="15%" title="学院ID" data-index="colId" align="center"/>
              <a-table-column width="15%" title="email" data-index="email" align="center"/>
              <a-table-column width="15%" title="姓名" data-index="name" align="center" />
              <a-table-column width="15%" title="密码" data-index="password" align="center"/>
              <a-table-column width="15%" title="手机号码" data-index="phoNumber" align="center"/>
              <a-table-column width="15%" title="老师ID" data-index="teaId" align="center"/>
              <a-table-column width="15%" title="工号" data-index="teaNumber" align="center"/>
              <a-table-column width="15%" key="stuId" title="操作" align="center">
                <template slot-scope="record">
                          <span>
                                <a-popconfirm
                                    title="确认删除该用户么?"
                                    @confirm="() => deleteUser(record.index,1)"
                                >
                                    <a href="javascript:;">删除</a>
                                </a-popconfirm>
                            
                          </span>
                </template>
              </a-table-column>
            </a-table>
          </div>
        </div>
    </a-row>
</template>

<script>
    import { mapState } from "vuex";

    export default {
        name: "BatchImportOne",
        data() {
            return {
                userRecord: {
                    name: '',
                    code: '',
                    courseId: ''
                }, // 存储当前编辑的课程信息
                modalVisible: false, // 是否显示编辑页面
            }
        },
        methods: {
            backPre(){ // 回到上一步
                this.$store.commit('user/SET_CURRENT_STEP',0)
            },
            importUser(){ //确认导入
                this.$store.dispatch('user/userImport', {token:this.accessState.token,type:this.userState.uploadState,collegeId:this.accessState.collegeId})
                .then(() => {
                    this.$message.success("导入成功");
                })
                .catch((error) => {
                    this.$message.error("错误" + error.msg);
                })
            },
            deleteUser(index,flag){ // 删除信息
              if(flag===1){
                this.$store.commit('user/DEL_TEACHER_UPLOAD',index)
              }else{
                this.$store.commit('user/DEL_STUDENT_UPLOAD',index)
              }
            },
        },
        computed: {
            ...mapState({ // 这个是提取store中access文件夹目录下的数据
                'userState': 'user', // 获取store
                'accessState': 'access'
            })
        }
    }
</script>

<style scoped>
    .show_content{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding: 4em;
    }
    .page_title{
        font-weight: bolder;
        font-size: 1.5em;
        position: relative;
        text-align: left;
    }
    .button_one{
        padding: 1em 2em;
        line-height: 0;
        font-size: 1em;
        width: 12em;
        margin: 1em;
        /*background: #3399ff;*/
    }
    #components-pagination-demo-mini .ant-pagination:not(:last-child) {
        margin-bottom: 24px;
    }

</style>
